<template>
  <div>
    <div class="form">
      <el-form label-position="right" label-width="120px" :model="form">
        <el-form-item :label="$t('setting.interfaceWay')">
          <el-select
            v-model="thirdPartyId"
            :placeholder="$t('common.pleaseSelect')"
            readonly
            style="width:80%;"
            @change="changeThirdParty"
          >
            <el-option
              v-for="item in thirdpartiesList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('setting.appUrl')">
          <el-input v-model="form.serverUrl" />
        </el-form-item>
        <el-form-item :label="$t('setting.appId')">
          <el-input v-model="form.appId" />
        </el-form-item>
        <el-form-item :label="$t('setting.appSecret')">
          <el-input v-model="form.appSecret" />
        </el-form-item>
        <el-form-item :label="$t('setting.accessType')">
          <el-select
            v-model="form.accessType"
            :placeholder="$t('common.pleaseSelect')"
            style="width:80%"
          >
            <el-option
              v-for="item in accessTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-haspermi="['bxy:thirdparties:edit']" class="button" type="primary" @click="handleClick">{{
            $t('setting.updataBasicInfo')
          }}</el-button>
          <el-button v-haspermi="['bxy:thirdparties:test']" class="button" type="success" @click="connectTest">{{
            $t('setting.connectTest')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="service-configure">
      <em />
      <span>
        {{ $t('settings.serviceConfigureInfo') }}
      </span>
    </div>
    <div style="padding-bottom: 50px;">
      <el-form label-position="right" label-width="120px" :model="serviceForm">
        <el-form-item label="URL">
          <el-input v-model="serviceForm.serviceUrl" :disabled="true" />
        </el-form-item>
        <el-form-item label="Token">
          <el-input v-model="serviceForm.serviceToken" :disabled="true" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { connectTest } from '@/api/settings';
import * as settings from '@/api/settings';

export default {
  name: 'Setting',
  data() {
    return {
      form: {
        appId: null,
        appSecret: null,
        serverUrl: null,
        accessType: 'userId',
      },
      accessTypeOptions: [
        { label: this.$t('setting.userId'), value: 'userId' },
        { label: this.$t('setting.customAccount'), value: 'customAccount' },
      ],
      thirdPartyId: null,
      thirdpartiesList: [],
      serviceForm: {
        serviceUrl: '',
        serviceToken: '',
      },
    };
  },
  created() {
    this.getThirdpartiesList();
    this.getServiceInfo();
  },
  methods: {
    async handleClick() {
      await settings.modifyThirdpartyById(this.thirdPartyId, this.form);
      this.$alert(this.$t('setting.synchronize'), {
        cancelButtonText: this.$t('common.cancel'),
      });
    },
    /**
     * 测试连接数据是否异常
     */
    connectTest() {
      const param = {
        appId: this.form.appId,
        appSecret: this.form.appSecret,
        serverUrl: this.form.serverUrl,
      };
      connectTest(this.thirdPartyId, param)
        .then(res => {
          if (res.data.status === 'ok') {
            this.$message({
              message: this.$t('setting.connectTestSuccess'),
              type: 'success',
            });
          } else {
            this.$message({
              message: this.$t('setting.connectTestFail'),
              type: 'error',
            });
          }
        });
    },
    /**
     * 获取第三方列表
     * */
    async getThirdpartiesList() {
      const res = await settings.getThirdpartiesList();
      this.thirdpartiesList = res.data;
      this.thirdPartyId = this.thirdpartiesList[0].id;
      this.form = this.thirdpartiesList[0];
    },
    /**
     * 更改第三方平台 重新加载树状结构
     * */
    async changeThirdParty() {
      const res = settings.getThirdpartyById();
      this.form = res;
    },
    /**
     * 获取服务配置信息
     * */
    async getServiceInfo() {
      const res = await settings.getServiceInfo();
      this.serviceForm = res.data;
    },
  },
};
</script>

<style scoped lang="scss">
.form {
  margin-top: 20px;
}
.el-input {
  width: 80%;
}
.service-configure {
  line-height: 44px;
  padding-left: 20px;
  em {
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 16px;
    background-color: #409eff;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
  }
}
</style>
